<template>
    <div>
        <div class="container">
            <el-descriptions
                class="margin-top"
                title="订单详情"
                :column="2"
                size="large"
                border
            >
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <list />
                        </el-icon>
                        订单编号：
                        </div>
                    </template>
                    {{detailData.o_order_code}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <star />
                        </el-icon>
                        眼镜数量：
                        </div>
                    </template>
                    {{detailData.o_glasses_num}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <star />
                        </el-icon>
                        已还镜数量:
                        </div>
                    </template>
                    {{detailData.f_num}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location />
                        </el-icon>
                        场地名称:
                        </div>
                    </template>
                    {{detailData.f_field_name}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <star />
                        </el-icon>
                        设备编码:
                        </div>
                    </template>
                    {{detailData.o_equipment_code}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <user />
                        </el-icon>
                        租户名称:
                        </div>
                    </template>
                    {{detailData.user_telphone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <location />
                        </el-icon>
                        使用区域
                        </div>
                    </template>
                    {{detailData.o_area}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets />
                        </el-icon>
                        是否退款
                        </div>
                    </template>
                    <el-tag v-if="detailData.o_is_refund == -1" type="success">已退款</el-tag>
                    <el-tag v-else-if="detailData.o_is_refund == 1" type="warning">退款中</el-tag>
                    <el-tag v-else-if="detailData.o_is_refund == 0" type="danger">未退款</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <tickets />
                        </el-icon>
                        归还状态
                        </div>
                    </template>
                    <el-tag v-if="detailData.o_status == 3" type="success">已还镜</el-tag>
                    <el-tag v-else-if="detailData.o_status == 2" type="danger">未归还</el-tag>
                    <el-tag v-else-if="detailData.o_status == 4" type="warning">部分还镜</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Clock />
                        </el-icon>
                        订单时间
                        </div>
                    </template>
                    {{ detailData.o_start_time }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <money />
                        </el-icon>
                        订单金额
                        </div>
                    </template>
                    {{ detailData.o_money }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Clock />
                        </el-icon>
                        支付时间
                        </div>
                    </template>
                    {{ detailData.o_pay_time }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Money />
                        </el-icon>
                        退款金额
                        </div>
                    </template>
                    {{ detailData.refund_fee }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <Clock />
                        </el-icon>
                        退款时间
                        </div>
                    </template>
                    {{ detailData.refund_time }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        <el-icon :style="iconStyle">
                            <QuestionFilled />
                        </el-icon>
                        退款原因
                        </div>
                    </template>
                    {{ detailData.refund_reason }}
                </el-descriptions-item>
            </el-descriptions>
            <el-table style="width: 100%" border :data="detailData.o_content">
                <el-table-column align="center" prop="t_type_name" label="眼镜类别" />
                <el-table-column align="center" prop="t_type_img" label="眼镜图片">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.t_type_img" fit="fill" />
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="t_target_customers" label="目标人群" />
                <el-table-column align="center" prop="t_deposit" label="押金" />
                <el-table-column align="center" prop="num" label="眼镜借出数量" />
            </el-table>
            <h4 style="margin-top: 40px;">眼镜归还详情</h4>

            <el-table style="width: 100%; margin-top: 20px" border :data="detailData.glasses_data">
                <el-table-column align="center" prop="glasses_type" label="眼镜类别" />
                <el-table-column align="center" prop="go_code" label="眼镜编码" />
                <el-table-column align="center" prop="go_output_time" label="借出时间" />
                <el-table-column align="center" prop="go_input_time" label="归还时间" />
                <el-table-column align="center" prop="go_status" label="眼镜归还状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.go_status == 1" type="success">已还镜</el-tag>
                        <el-tag v-else="scope.row.go_status == -1" type="danger">未还镜</el-tag>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive, computed, onBeforeMount } from 'vue';
import { Place } from './types/cooperUser.js';
import {
  Iphone,
  Location,
  Money,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import { query_order_info } from '@/api';
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
import type { ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')

const detailData = ref<Place[]>([]);
const getData = async (params) => {
    const res = await query_order_info(params)
    detailData.value = res.data
    
};

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
onBeforeMount(() => {
    const router = useRouter();
    const params = router.currentRoute.value.query
    getData(params);
})

onBeforeRouteUpdate((data) => {
    console.log(data)
})

</script>

<style scoped></style>